<template>
  <div
    class="app-box-logo"
    :class="className"
    @mouseenter="enter"
    @mouseleave="leave"
  >
    <img class="logo-box" src="@/assets/icon_box.svg" alt="" />
    <img class="logo-phone" src="@/assets/icon_phone.svg" alt="" />
    <img class="logo-app" src="@/assets/icon_app.svg" alt="" />
  </div>
</template>
<script>
export default {
  props: {
    flow: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      className: '',
      timer: null,
      flowTimer: null,
      flowTop: false
    }
  },
  mounted () {
    this.setFlow(true)
  },
  unmounted () {
    if (this.timer) {
      clearTimeout(this.timer)
    }
    if (this.flowTimer) {
      clearInterval(this.flowTimer)
    }
  },
  methods: {
    enter () {
      this.setFlow(false)
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.className = 'app-box-logo-mid'
      this.timer = setTimeout(() => {
        this.className = 'app-box-logo-final'
        this.timer = null
      }, 1000)
    },
    leave () {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
        this.className = ''
        this.setFlow(true)
      } else {
        this.className = 'app-box-logo-mid'
        this.timer = setTimeout(() => {
          this.className = ''
          this.setFlow(true)
        }, 1000)
      }
    },
    setFlow (start) {
      if (!this.flow) {
        return
      }
      if (this.flowTimer) {
        clearInterval(this.flowTimer)
        this.className = ''
        this.flowTop = false
      }
      if (start) {
        this.flowTimer = setInterval(() => {
          if (this.flowTop) {
            this.className = 'app-box-logo-flow-bottom'
          } else {
            this.className = 'app-box-logo-flow-top'
          }
          console.log('---')
          this.flowTop = !this.flowTop
        }, 1000)
      }
    }

  },
  setup () {

  }
}
</script>

<style lang="scss" scoped>
  .app-box-logo {
    position: relative;
    .logo-box {
      width: 100%;
      height: 100%;
      transition: all 1s ;
    }
    .logo-phone {
      opacity: 0;
      left: 10%;
      top: 10%;
      position: absolute;
      width: 80%;
      height: 80%;
      transition: all 1s;
    }
    .logo-app {
      position: absolute;
      top: -3%;
      left: 30%;
      width: 40%;
      transition: all 1s ease-in-out;
    }
  }
  .app-box-logo-mid {
    .logo-box {
      opacity: 0;
    }
    .logo-phone {
      opacity: 0;
    }
    .logo-app {
      top: -15%;
      transform: scale(1.4);
    }
  }

  .app-box-logo-final {
    .logo-box {
      opacity: 0;
    }
    .logo-phone {
      opacity: 1;
    }
    .logo-app {
      top: 25%;
      transform: scale(0.7);
    }
  }
  .app-box-logo-flow-top {
    .logo-app {
      top: -10%;
    }
  }
  .app-box-logo-flow-bottom {
    .logo-app {
      top: -3%;
    }
  }
</style>
